<template>
  <input class="el-input--inner" type="text" :value="modelValue" @input="handleInput" />
</template>
<script lang="ts">
export default {
  name: 'ElInput'
}
</script>
<script setup lang="ts">
import { emitter } from '../../emitter'

const emit = defineEmits<{
  (e: 'update:model-value', value: string): void
}>()
// const modelValue = ref('')
defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

function handleInput(e: Event) {
  let val = (e.target as HTMLInputElement).value
  val = val.trim()
  emit('update:model-value', val)
  emitter.emit('validate')
}
</script>

<style lang="scss" scoped>
@import '../../styles/mixin';

@include b(input) {
  @include m(inner) {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 0 15px;
    font-size: inherit;
    line-height: 40px;
    color: #606266;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    outline: 0;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>
